<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div class="root">
        <h1>hello,{{name}}{{age}}</h1><!--  {{}}内必须是js表达式  -->
        <p>来自于{{school.name}},任教{{school.subject.name}}</p>
        <a v-bind:href="url">百度</a><!-- v-bind绑定；"v-bind:"可简写为 ":";双引号内是js表达式  -->
        <a :href="school.url">中南民族大学</a>
    </div>

    <div class="bind">
        <!-- v-bind单项数据绑定，v-model双向数据绑定 -->
        单项数据绑定：<input type="text" v-bind:value="dan">
        双向数据绑定：<input type="text" v-model:value="shuang"><!-- v-model只能用于表单类（输入类）元素(有value值的元素) -->
        双向数据绑定：<input type="text" v-model="shuang"><!-- v-model：value可以简写为v-model，因为v-model默认收集的就是value值 -->
    </div>
    <!--初识vue
        1.想要vue工作必须先创建一个vue的实例，且传入配置对象
        2.被指定的容器中的代码成为vue模板
        3.vue实例与容器的关系是一一对应的
         -->




    <script type="text/javascript">
        Vue.config.productionTip = false;//组织vue在启动的时候生成生产提示

        //创建一个vue实例
        const a = new Vue({
            el:'.root',//el为element的缩写，用于指定当前vue实例为哪个容器服务，值通常为css选择器字符
            data:{//data用于存储数据，为el指定容器所用，值暂时写成一个对象
                name:"李波",
                age:"31",
                url:"https://www.baidu.com",
                school:{
                    name:"中南民族大学",
                    url:"https://www.scuec.edu.cn/",
                    subject:{
                        name:"数据挖掘导论"
                    }
                }
            }
        })

        const b = new Vue({
            // el:".bind",
            // data:{//data的对象式写法
            //     dan:"单项数据绑定",
            //     shuang:"双向数据绑定"
            // }
            //data的函数式写法，必须return一个对象
            data:function(){//不能是箭头函数
                return{
                    dan:"单项数据绑定",
                    shuang:"双向数据绑定"
                }
            }
        })

        //一秒后才绑定容器
        setTimeout(() => {
                b.$mount('.bind')//el的第二种写法，但是这种方法更加灵活
            },1000)
    </script>
</body>
</html>